<template>
  <div class="map-container">
    <div class="page-header">
      <h1>地图</h1>
      <div class="search-location">
        <input
          type="text"
          placeholder="搜索位置..."
          v-model="searchQuery"
          @keyup.enter="searchLocation"
        />
        <button class="search-btn" @click="searchLocation">
          <span class="search-icon">🔍</span>
        </button>
      </div>
    </div>

    <div class="map-content">
      <div class="map-sidebar">
        <div class="section-title">收藏位置</div>
        <ul class="location-list">
          <li
            v-for="(location, index) in favoriteLocations"
            :key="index"
            class="location-item"
            :class="{ active: selectedLocation === location.id }"
            @click="selectLocation(location)"
          >
            <span class="location-icon">📍</span>
            <div class="location-info">
              <div class="location-name">{{ location.name }}</div>
              <div class="location-address">{{ location.address }}</div>
            </div>
          </li>
        </ul>

        <div class="section-title">最近查看</div>
        <ul class="location-list">
          <li
            v-for="(location, index) in recentLocations"
            :key="index"
            class="location-item"
            :class="{ active: selectedLocation === location.id }"
            @click="selectLocation(location)"
          >
            <span class="location-icon">📍</span>
            <div class="location-info">
              <div class="location-name">{{ location.name }}</div>
              <div class="location-address">{{ location.address }}</div>
            </div>
          </li>
        </ul>
      </div>

      <div class="map-view">
        <!-- 地图占位区域 -->
        <div class="map-placeholder" v-if="!mapLoaded">
          <div class="placeholder-icon">🗺️</div>
          <p>地图加载中...</p>
        </div>

        <!-- 实际地图区域 -->
        <div id="map" class="map-area" v-show="mapLoaded"></div>

        <!-- 位置详情 -->
        <div class="location-details" v-if="selectedLocationDetails">
          <div class="details-header">
            <h3>{{ selectedLocationDetails.name }}</h3>
            <button class="close-btn" @click="closeDetails">×</button>
          </div>
          <div class="details-content">
            <div class="detail-item">
              <span class="detail-label">地址:</span>
              <span class="detail-value">{{
                selectedLocationDetails.address
              }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">坐标:</span>
              <span class="detail-value">{{
                selectedLocationDetails.coordinates
              }}</span>
            </div>
            <div class="detail-item" v-if="selectedLocationDetails.description">
              <span class="detail-label">描述:</span>
              <span class="detail-value">{{
                selectedLocationDetails.description
              }}</span>
            </div>
          </div>
          <div class="details-actions">
            <button
              class="action-btn"
              @click="addToFavorites(selectedLocationDetails)"
            >
              <span class="btn-icon">⭐</span> 添加到收藏
            </button>
            <button
              class="action-btn"
              @click="getDirections(selectedLocationDetails)"
            >
              <span class="btn-icon">🚗</span> 获取路线
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from "vue";

// 搜索查询
const searchQuery = ref("");

// 地图加载状态
const mapLoaded = ref(false);

// 当前选中的位置ID
const selectedLocation = ref("");

// 选中的位置详情
const selectedLocationDetails = ref(null);

// 模拟收藏位置数据
const favoriteLocations = reactive([
  {
    id: "1",
    name: "公司",
    address: "北京市海淀区中关村大街1号",
    coordinates: "39.9789,116.3272",
    description: "公司总部",
  },
  {
    id: "2",
    name: "家",
    address: "北京市朝阳区建国路88号",
    coordinates: "39.9088,116.4716",
    description: "家庭住址",
  },
  {
    id: "3",
    name: "常去的咖啡厅",
    address: "北京市西城区西单北大街120号",
    coordinates: "39.9132,116.3747",
    description: "喜欢的工作场所",
  },
]);

// 模拟最近查看位置数据
const recentLocations = reactive([
  {
    id: "4",
    name: "北京站",
    address: "北京市东城区毛家湾胡同甲13号",
    coordinates: "39.9042,116.4271",
    description: "火车站",
  },
  {
    id: "5",
    name: "故宫博物院",
    address: "北京市东城区景山前街4号",
    coordinates: "39.9163,116.3972",
    description: "著名景点",
  },
  {
    id: "6",
    name: "北京大学",
    address: "北京市海淀区颐和园路5号",
    coordinates: "39.9869,116.3059",
    description: "高等学府",
  },
]);

// 搜索位置
const searchLocation = () => {
  if (!searchQuery.value.trim()) return;

  console.log("搜索位置:", searchQuery.value);
  // 这里可以调用地图API进行位置搜索
  // 模拟搜索结果
  setTimeout(() => {
    const mockResult = {
      id: "7",
      name: searchQuery.value,
      address: "北京市某区某街道",
      coordinates: "39.9042,116.4271",
      description: "搜索结果",
    };

    selectLocation(mockResult);
    searchQuery.value = "";
  }, 1000);
};

// 选择位置
const selectLocation = (location: any) => {
  selectedLocation.value = location.id;
  selectedLocationDetails.value = location;

  // 这里可以调用地图API将地图中心移动到选中的位置
  console.log("选择位置:", location);
};

// 关闭详情面板
const closeDetails = () => {
  selectedLocationDetails.value = null;
};

// 添加到收藏
const addToFavorites = (location: any) => {
  // 检查是否已经在收藏中
  const exists = favoriteLocations.some((item) => item.id === location.id);
  if (!exists) {
    favoriteLocations.push(location);
    console.log("添加到收藏:", location);
  }
};

// 获取路线
const getDirections = (location: any) => {
  console.log("获取到该位置的路线:", location);
  // 这里可以调用地图API获取路线
};

// 模拟加载地图
onMounted(() => {
  console.log("加载地图...");

  // 模拟地图加载延迟
  setTimeout(() => {
    mapLoaded.value = true;
    console.log("地图加载完成");

    // 这里可以初始化地图
    initMap();
  }, 1500);
});

// 初始化地图
const initMap = () => {
  console.log("初始化地图");
  // 这里可以使用地图API初始化地图
  // 例如使用Leaflet, Google Maps或百度地图API

  // 模拟地图初始化
  const mapElement = document.getElementById("map");
  if (mapElement) {
    mapElement.innerHTML = `
      <div style="
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e9ecef;
        color: #495057;
        font-size: 1.5rem;
      ">
        <div style="text-align: center;">
          <div style="font-size: 4rem; margin-bottom: 20px;">🗺️</div>
          <div>地图已加载 (模拟)</div>
          <div style="font-size: 1rem; margin-top: 10px;">实际应用中这里将显示真实地图</div>
        </div>
      </div>
    `;
  }
};

// 清理资源
onUnmounted(() => {
  console.log("清理地图资源");
  // 这里可以清理地图资源
});
</script>

<style lang="scss" scoped>
.map-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h1 {
    font-size: 1.8rem;
    margin: 0;
    color: var(--dark-color);
  }
}

.search-location {
  display: flex;
  align-items: center;

  input {
    width: 300px;
    padding: 8px 15px;
    border-radius: 20px 0 0 20px;
    border: 1px solid #e1e5eb;
    border-right: none;
    font-size: 0.9rem;

    &:focus {
      outline: none;
      border-color: var(--primary-color);
    }
  }

  .search-btn {
    background: var(--primary-gradient);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 0 20px 20px 0;
    cursor: pointer;

    &:hover {
      opacity: 0.9;
    }
  }
}

.map-content {
  display: flex;
  flex: 1;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.map-sidebar {
  width: 280px;
  background: #f8f9fa;
  padding: 20px;
  border-right: 1px solid #e1e5eb;
  overflow-y: auto;

  .section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-color);
    margin: 20px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    &:first-child {
      margin-top: 0;
    }
  }
}

.location-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.location-item {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 5px;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(58, 123, 213, 0.05);
  }

  &.active {
    background: rgba(58, 123, 213, 0.1);
    border-left: 3px solid var(--primary-color);
  }

  .location-icon {
    margin-right: 10px;
    font-size: 1.2rem;
  }

  .location-info {
    flex: 1;

    .location-name {
      font-size: 0.9rem;
      color: var(--dark-color);
      margin-bottom: 3px;
    }

    .location-address {
      font-size: 0.75rem;
      color: var(--gray-color);
    }
  }
}

.map-view {
  flex: 1;
  position: relative;
}

.map-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;

  .placeholder-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    color: var(--gray-color);
  }

  p {
    font-size: 1.2rem;
    color: var(--gray-color);
  }
}

.map-area {
  width: 100%;
  height: 100%;
}

.location-details {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 300px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  .details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--primary-gradient);
    color: white;

    h3 {
      margin: 0;
      font-size: 1.1rem;
    }

    .close-btn {
      background: none;
      border: none;
      color: white;
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0;
      line-height: 1;
    }
  }

  .details-content {
    padding: 15px;

    .detail-item {
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }

      .detail-label {
        display: block;
        font-size: 0.8rem;
        color: var(--gray-color);
        margin-bottom: 3px;
      }

      .detail-value {
        font-size: 0.9rem;
        color: var(--dark-color);
      }
    }
  }

  .details-actions {
    display: flex;
    border-top: 1px solid #e1e5eb;

    .action-btn {
      flex: 1;
      padding: 10px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.9rem;
      color: var(--primary-color);
      display: flex;
      align-items: center;
      justify-content: center;

      &:first-child {
        border-right: 1px solid #e1e5eb;
      }

      &:hover {
        background: rgba(58, 123, 213, 0.05);
      }

      .btn-icon {
        margin-right: 5px;
      }
    }
  }
}
</style>
